<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加订单</title>

    <!--公用css引用-->
    <?php include 'include/style.php';?>
    <!--END/公用css引用-->
    <link rel="stylesheet" href="../css/confirm-order.css">
</head>
<body>

<!--公共头部-->
<?php include 'include/header.php';?>
<!--END/公共头部-->

<div class="inbox add-order">
    <div class="ad-o-h">
        <span class="h-txt">填写并核对订单信息</span>
    </div>
    <form action="" class="js-form">
    <div class="ad-o-b">
        <div class="ad-o-inner">
            <div class="o-b-h1 fn-ohide">
                <span class="h-txt">收货人信息</span>
                <a href="u-address.php" class="js-add more">管理收货地址</a>
            </div>
            <div class="o-b-b">
                <ul class="js-selAddress address">
                    <li data-id="3">
                        <div class="tag-st fn-dib cur">
                            <span class="tag-txt fn-dib-otw">申长伟</span>
                            <span class="tag-txt fn-dib-otw">河南</span>
                            <img class="rd" src="../images/right.png" alt="" >
                        </div>

                        <div class="info fn-dib">
                            <span class="fn-dib fn-dib-otw name">申长伟</span>
                            <span class="fn-dib fn-dib-otw pos">河南 郑州市 中原区 中原路82号中晟银泰国际中心27层2703室（中原万达对面）</span>
                            <span class="fn-dib fn-dib-otw tel">18703644856</span>
                        </div>
                    </li>
                    <li data-id="3">
                        <div class="tag-st fn-dib">
                            <span class="tag-txt fn-dib-otw">申长伟</span>
                            <span class="tag-txt fn-dib-otw">河南</span>
                            <img class="rd" src="../images/right.png" alt="" >
                        </div>

                        <div class="info fn-dib">
                            <span class="fn-dib fn-dib-otw name">李宁</span>
                            <span class="fn-dib fn-dib-otw pos">上海市 黄埔区 中原路82号中晟银泰国际中心27层2703室（中原万达对面）</span>
                            <span class="fn-dib fn-dib-otw tel">156035847598</span>
                        </div>
                    </li>
                    <li data-id="3">
                        <div class="tag-st fn-dib">
                            <span class="tag-txt fn-dib-otw">申长伟</span>
                            <span class="tag-txt fn-dib-otw">河南</span>
                            <img class="rd" src="../images/right.png" alt="" >
                        </div>

                        <div class="info fn-dib">
                            <span class="fn-dib fn-dib-otw name">申长伟</span>
                            <span class="fn-dib fn-dib-otw pos">河南 郑州市 中原区 中原路82号中晟银泰国际中心27层2703室（中原万达对面）</span>
                            <span class="fn-dib fn-dib-otw tel">18703644856</span>
                        </div>
                        <!--<div class="op-btns" data-id="137859155">
                            <a href="#none" class="js-setDefault">设为默认地址</a>
                            <a href="#none" class="js-edit">编辑</a>
                            <a href="#none" class="js-del">删除</a>
                        </div>-->
                    </li>
                </ul>
                <input type="hidden" name="address" value="">
            </div>

        </div>

        <!--支付方式-->
        <div class="ad-o-inner ad-o-hor fn-ohide">
            <div class="o-b-h1">
                <span class="h-txt">支付方式</span>
            </div>
            <div class="o-b-fl">
                <div class="text-color-1">在线支付（支持支付宝、银联、财付通等）</div>
            </div>
        </div>
        <!--END/支付方式-->

        <!--配送方式-->
        <div class="ad-o-inner ad-o-hor fn-ohide">
            <div class="o-b-h1">
                <span class="h-txt">配送方式</span>
            </div>
            <div class="o-b-fl">
                <div class="text-color-1">快递配送（免运费）</div>
            </div>
        </div>
        <!--END/配送方式-->

        <!--收货时间-->
        <div class="ad-o-inner ad-o-hor fn-ohide">
            <div class="o-b-h1">
                <span class="h-txt">收货时间</span>
            </div>
            <div class="o-b-fl js-simRadio">
                <div class="js-check fn-dib o-s-t cur">
                    <label class="fn-db">不限送货时间：周一至周日<input type="radio" class="t-input" name="Time" value="1" checked></label>
                </div>
                <div class="js-check fn-dib o-s-t">
                    <label class="fn-db">工作日送货：周一至周五<input type="radio" class="t-input" name="Time" value="2"></label>
                </div>
                <div class="js-check fn-dib o-s-t">
                    <label class="fn-db">双休日、节假日送货：周六至周日<input type="radio" class="t-input" name="Time" value="3"></label>
                </div>

            </div>
        </div>
        <!--END/收货时间-->

        <!--发票-->
        <div class="ad-o-inner ad-o-hor fn-ohide">
            <div class="o-b-h1">
                <span class="h-txt">发票</span>
            </div>
            <div class="o-b-fl">
                <div class="fn-dib o-s-t cur fn-mb20">
                    <label class="fn-db">普通发票（纸质）<input type="radio" class="t-input" name="INV" value="1" checked></label>
                </div>
                <div class="js-simRadio">
                    <div class="js-check fn-dib o-s-t cur">
                        <label class="fn-db">个人<input type="radio" class="t-input" name="INVType" value="1" checked></label>
                    </div>
                    <div class="js-check fn-dib o-s-t">
                        <label class="fn-db">单位<input type="radio" class="t-input" name="INVType" value="2" checked></label>
                    </div>
                    <div class="o-b-txt fn-mt10">
                        <p>发票抬头：<span class="inv js-selectedTxt">个人</span></p>
                        <p>发票内容：<span class="inv-detail">购买商品明细</span></p>
                    </div>
                </div>


            </div>
        </div>
        <!--END/发票-->

        <!--添加备注-->
        <div class="ad-o-inner ad-o-hor fn-ohide">
            <div class="o-b-h1">
                <span class="h-txt">添加备注</span>
            </div>
            <div class="o-b-fl">
                <input type="text" class="fn-tinput note" maxlength="100" placeholder="可将购买需求在备注中做详细说明">
            </div>
        </div>
        <!--添加备注-->

        <div class="ad-o-inner fn-ohide">
            <div class="o-b-h1">
                <span class="h-txt">确认商品信息</span>
                <a href="#" class=" more">返回购物车 &gt;</a>
            </div>
            <div class="o-b-b fn-mt10">
                <div class="tit">
                    <div class="h">苏宁易购 发货</div>
                </div>
                <table class="bl-table bl-table-brdli o-g-list">
                    <tr>
                        <td colspan="2" class="tc">商品详情</td>
                        <td>数量</td>
                        <td class="tr">关税/运费</td>
                    </tr>
                    <tr data-id="1">
                        <td class="pic tl">
                            <a href="#">
                                <img class="goods-img" src="../images/classify/pic-14.jpg" alt="描述">
                            </a>
                        </td>
                        <td class="tl name">
                            <p class="name"><a class="link" href="#">全棉个性四件套 纯棉简约床单床品套件1.5与1.8床通用被套2*2.3m</a></p>
                            <p class="fn-mt4 text-color-1">关税：￥<span class="js-gs">15</span></p>
                        </td>
                        <td>
                            <span>￥228*1</span>
                        </td>
                        <td class="tr">
                            <span class="text-color-1">￥228</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tr bg-4" colspan="4">
                            本单关税：￥0.00
                        </td>
                    </tr>
                </table>
            </div>

            <div class="o-b-b fn-mt10">
                <div class="tit">
                    <div class="h">阿福易购 发货</div>
                </div>
                <table class="bl-table bl-table-brdli o-g-list">
                    <tr>
                        <td colspan="2" class="tc">商品详情</td>
                        <td>数量</td>
                        <td class="tr">关税/运费</td>
                    </tr>
                    <tr data-id="1">
                        <td class="pic tl">
                            <a href="#">
                                <img class="goods-img" src="../images/classify/pic-14.jpg" alt="描述">
                            </a>
                        </td>
                        <td class="tl name">
                            <p class="name"><a class="link" href="#">全棉个性四件套 纯棉简约床单床品套件1.5与1.8床通用被套2*2.3m</a></p>
                            <p class="fn-mt4 text-color-1">关税：￥<span class="js-gs">15</span></p>
                        </td>
                        <td>
                            <span>￥228*1</span>
                        </td>
                        <td class="tr">
                            <span class="text-color-1">￥228</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tr bg-4" colspan="4">
                            本单关税：￥0.00
                        </td>
                    </tr>
                </table>
            </div>



            <!--优惠券-->
            <div class="ad-o-inner ad-o-hor fn-ohide fn-mt20">
                <div class="o-b-h1" style="width: 60px;">
                    <span class="h-txt">优惠券</span>
                </div>
                <div class="o-b-fl js-simRadio">
                    <div class="ui-cols-2">
                        <div class="col">
                            <dl class="fn-ml20">
                                <dt class="bg-4"><span class="fn-ml20">E贸易商品订单优惠券(限用一张)</span></dt>
                                <dd class="fn-ml20"><label><input class="J-couponSelE" value="1" type="checkbox" name="coupon_E"> 满50减5</label></dd>
                                <dd class="fn-ml20"><label><input class="J-couponSelE" value="2" type="checkbox" name="coupon_E"> 满100减10</label></dd>
                                <dd class="fn-ml20"><label><input class="J-couponSelE" value="3" type="checkbox" name="coupon_E"> 满200减30</label></dd>
                            </dl>
                        </div>
                        <div class="col">
                            <dl class="fn-ml20">
                                <dt class="bg-4"><span class="fn-ml20">普通商品订单优惠券(限用一张)</span></dt>
                                <dd class="fn-ml20"><label><input class="J-couponSelC" value="1" type="checkbox" name="coupon_C"> 满50减5</label></dd>
                                <dd class="fn-ml20"><label><input class="J-couponSelC" value="2" type="checkbox" name="coupon_C"> 满100减10</label></dd>
                                <dd class="fn-ml20"><label><input class="J-couponSelC" value="3" type="checkbox" name="coupon_C"> 满200减30</label></dd>
                            </dl>
                        </div>
                    </div>


                </div>
            </div>
            <!--END/优惠券-->

            <div class="o-b-b">
                <div class="o-sel-sub fn-tr">
                    <p>
                        <span class="label">商品件数：</span>
                        <span class="fn-dib val">2件</span>
                    </p>

                    <p>
                        <span class="label">金额合计：</span>
                        <span class="fn-dib val">￥69.00</span>
                    </p>

                    <p>
                        <span class="label">关税：</span>
                        <span class="fn-dib val">￥6.90</span>
                    </p>

                    <p>
                        <span class="label">运费：</span>
                        <span class="fn-dib val">￥0.00</span>
                    </p>

                    <p class="J-couponNum fn-hide">
                        <span class="label">优惠券：</span>
                        <span class="fn-dib val">减￥<span class="J-val">0.00</span></span>
                    </p>

                    <p class="total-num">
                        <span class="label">应付金额：</span>
                        <span class="J-totalNum fn-dib val" data-price="228">￥228.00</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="ad-btn-wrap">
            <div>
                <div class="fn-dib summarize">
                    <p class="font-18">
                        实付款：<span class="text-color-7">￥</span><span class="font-24 text-color-1">288.00</span>
                    </p>
                    <p><strong>寄送至：</strong><span class="js-orderAddress">河南省 郑州市 中原区 中原路82号中晟银泰国际中心27层2703室（中原万达对面）</span></p>
                    <p><strong>收货人：</strong><span class="js-AddresseeName">申长伟</span> <span class="js-AddresseeMobile">18703644856</span></p>
                </div>
            </div>

            <a href="payment.php" class="fn-btn btn-primary pay-btn">提交订单</a>

        </div>

    </div>
    </form>
</div>

<!--公共尾部-->
<?php include 'include/footer.php'; ?>
<!--END/公共尾部-->

<!--公用js引用-->
<?php include 'include/script.php'; ?>
<!--END/公用js引用-->

<!--<script src="../js/"></script>-->
<script>
    //优惠券
    var couponNum=$('.J-couponNum');
    var couponSelE=$('.J-couponSelE');
    var couponSelC=$('.J-couponSelC');
    var e_coupon_id='',c_coupon_id='';

    couponSelE.on('change',function(){
        var that=$(this),isChecked=that.prop('checked');
        var sibs=that.closest('dd').siblings('dd').find('input');
        changeCouponStatus(that,sibs,couponSelC,isChecked)
    });

    couponSelC.on('change',function(){
        var that=$(this),isChecked=that.prop('checked');
        var sibs=that.closest('dd').siblings('dd').find('input');
        changeCouponStatus(that,sibs,couponSelE,isChecked)
    });

    function changeCouponStatus(curInput,siblings,others,isChecked){
        var id=curInput.val();

        others.prop({'disabled':false});

        if(isChecked){
            others.filter('[value="'+id+'"]').prop({'checked':false,'disabled':true});
            siblings.prop({'checked':false});
        }

        var couponE=couponSelE.length&&couponSelE.filter(':checked');
        var couponC=couponSelC.length&&couponSelC.filter(':checked');

        e_coupon_id=couponE.length?couponE.val():'';
        c_coupon_id=couponC.length?couponC.val():'';

        //TODO 发请求
        console.log('{e:'+e_coupon_id+'}');
        console.log('{c:'+c_coupon_id+'}');
    }

    //地址
    var selAddress=$('.js-selAddress');
    selAddress.on('click','.tag-st',function(){
        var that=$(this),
            liItem=that.closest('li'),
            prevCur=selAddress.find('.tag-st.cur'),
            addressInput=selAddress.next('input');

        var id=liItem.data('id');
        addressInput.val(id);
        prevCur.removeClass('cur');
        that.addClass('cur');

        //切换底部邮寄信息展示
        var orderAddress=$('.js-orderAddress'),
            addresseeName=$('.js-AddresseeName'),
            addresseeMobile=$('.js-AddresseeMobile');

        orderAddress.text(liItem.find('.pos').text());
        addresseeName.text(liItem.find('.name').text());
        addresseeMobile.text(liItem.find('.tel').text());
    });

    //收货时间
    $('.js-simRadio').on('click','.js-check',function(){
        var that=$(this),wrap=that.closest('.js-simRadio');

        if(that.hasClass('cur')) return false;

        that.addClass('cur').siblings('.cur').removeClass('cur').find('input').prop('checked',false);
        that.find('input').prop('checked',true);

        //todo 切换发票抬头
        var selTxt=$('.js-selectedTxt',wrap);
        if(selTxt.length){
            selTxt.text(that.find('label').text());
        }

        return false;
    });
</script>
</body>
</html>